<script setup lang="ts">
import { computed, provide, ref } from 'vue'
import InjectView from './InjectView/CmpTop.vue'
import { configCKey } from './InjectView/InjectType'

const template = ref({
  config: {
    size: 'small',
    width: '200px',
  },
})

const configVm = computed({
  get() {
    return JSON.stringify(template.value.config)
  },
  set(val) {
    template.value.config = JSON.parse(val)
  },
})

const config = computed(() => template.value.config)
provide(configCKey, config)
</script>

<template>
  <input type="text" v-model="configVm" style="width: 100%" />
  <hr />
  <InjectView />
</template>

<style scoped></style>
